<template>
  <div>
  <div class="maindiv">
    <div class="left-div">
      <span class="title">监控预警系统</span>
      <ul class="nav">
        <li class="nav-item"><i class="iconfont icon-dalou4 icon"></i>市派案件监控预警</li>
        <li class="nav-item"><i class="iconfont icon-gongan icon"></i>巡查案件监控预警</li>
        <li class="nav-item"><i class="iconfont icon-lingdang icon"></i>三治问题监控预警</li>
        <li class="nav-item"><i class="iconfont icon-cengji icon"></i>网格工作监控预警</li>
        <li class="nav-item"><i class="iconfont icon-che-tianchong icon"></i>移车投诉监控预警</li>
        <li class="nav-item"><i class="iconfont icon-kefu-ermai icon"></i>热线投诉监控预警</li>
        <li class="nav-item"><i class="iconfont icon-pingtaiguanli icon"></i>四个平台监控预警</li>
        <li class="nav-item icon-pading"><i class="iconfont icon-bangong- icon"></i>浙里办系统监控预警</li>
        <li class="nav-item icon-pading"><i class="iconfont icon-zhengwushenpi icon"></i>浙政钉系统监控预警</li>
      </ul>
    </div>
    <div class="center"><span class="big-title">超时案件预警</span></div>
    <div class="right-div">
      <div class="btns-top"><button class="yj-btn" @click="fromData">预警工作台</button><i class="iconfont icon-tubiaozhizuomoban iconj"></i></div>
      <ul class="yj-nav">
        <li class="yj-nav-item"><i class="iconfont icon-sanjiaoleft icons"></i>超时案件预警</li>
        <li class="yj-nav-item"><i class="iconfont icon-sanjiaoleft icons"></i>延期案件预警</li>
        <li class="yj-nav-item"><i class="iconfont icon-sanjiaoleft icons"></i>返工案件预警</li>
      </ul>
    </div>
  </div>
  <div class="fromsData" id="fromsData" v-show="isShow">
      <div class="fromsData-title">
        <span class="fromsData-title-cs">已超时</span>
        <span class="title-time time-magin">0</span><span class="title-time">1</span>天<span class="title-time time-magin">0</span><span class="title-time">6</span>小时<span class="title-time time-magin">1</span><span class="title-time">0</span>分钟
      </div>
      <div class="forms-main">
        <div class="main-left fl">
          <div class="left-formdata">
            <span class="input-text">任务编号：</span><input type="text" class="form-input" readonly="readonly" value="1803E4025082"/>
            <span class="input-text">案件编号：</span><input type="text" class="form-input" readonly="readonly" value="AP201803061634"/>
            <span class="input-text">问题来源：</span><input type="text" class="form-input" readonly="readonly" value="巡查上服"/>
            <span class="input-text">发现时间：</span><input type="text" class="form-input" readonly="readonly" value="2018-03-06 09:07"/>
            <span class="input-text input-b">当前状态：</span><input type="text" class="form-input input-b" readonly="readonly" value="立案"/>
            <span class="input-text">结案时间：</span><input type="text" class="form-input" readonly="readonly" value="2018-03-06 09:07"/>
            <span class="input-text">案件类别：</span><input type="text" class="form-input axlb-input" readonly="readonly" value="事件-大类名称-小类名称"/>
            <span class="input-text">村（社区）：</span><input type="text" class="form-input" readonly="readonly" value="梅石社区(梅里村)"/>
            <span class="input-text">　　网格：</span><input type="text" class="form-input" readonly="readonly" value="wj0408058"/>
            <span class="input-text">　　坐标：</span><input type="text" class="form-input" readonly="readonly" value="120.618597.31.157263"/>
            <span class="input-text">　　地址：</span><input type="text" class="form-input dz-input" readonly="readonly" value="爽川区(梅石小区)44栋四单元西侧"/>
            <span class="input-text">问题描述：</span><input type="text" class="form-input dz-input" readonly="readonly" value="住户王丽芬在2018年1月和2月共用水76立方.超过用水量黄灯阈值16立方"/>
            <hr class="hr-text" />
            <span class="input-text1">受理人员：</span><input type="text" class="form-input sl-input1" readonly="readonly" value="港闸区城市管理局(3201156)"/>
            <span class="input-text1">受理时间：</span><input type="text" class="form-input sl-input2" readonly="readonly" value="2018-03-06 09:07"/>
            <span class="input-text1">受理意见：</span><input type="text" class="form-input sl-input3" readonly="readonly" value="自动受理"/>
            <span class="input-text1">立案人员：</span><input type="text" class="form-input sl-input1" readonly="readonly" value="港闸区城市管理局(3201245)"/>
            <span class="input-text1">立案时间：</span><input type="text" class="form-input sl-input2" readonly="readonly" value="2018-03-06 09:07"/>
            <span class="input-text1">立案意见：</span><input type="text" class="form-input sl-input3" readonly="readonly" value="自动立案"/>
          </div>
          <div class="tablemode">
            <span class="modetitle">指挥处置</span>
            <table frame=below border="0">
              <thead>
                <tr>
                  <th>操作</th>
                  <th>人员</th>
                  <th>所属部门</th>
                  <th>意见</th>
                  <th>时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in tbdata" :key="index">
                  <td>{{ item.cuozuo }}</td>
                  <td>{{ item.renyuan }}</td>
                  <td>{{ item.bumen }}</td>
                  <td>{{ item.yijian }}</td>
                  <td>{{ item.time }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="main-right">
          <span class="modetitle-right">核查结案</span>
          <div class="right-formdata">
            <span class="input-text">结案人员：</span><input type="text" class="form-input jiean-input1" readonly="readonly" value="刘晓龙"/>
            <span class="input-text">结案部门：</span><input type="text" class="form-input jiean-input2" readonly="readonly" value="开发区(同里镇)联动指挥中心"/>
            <span class="input-text">结案评测：</span><input type="text" class="form-input jiean-input1" readonly="readonly" value="正常结案"/>
            <span class="input-text">结案时间：</span><input type="text" class="form-input jiean-input2" readonly="readonly" value="2018-03-06 09:07"/>
            <span class="input-text">结案意见：</span><input type="text" class="form-input jiean-input1" readonly="readonly" value="已处理"/>
          </div>
          <span class="modetitle-right-img">上报图片</span>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <span class="modetitle-right-img">结案图片</span>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
          <div class="img"></div>
        </div>
        <div class="form-btns">
        <button class="jiechu-btn btn-magin"><i class="iconfont icon-gou iconb"></i>手动解除</button>
        <button class="jiechu-btn"><i class="iconfont icon-pan_icon iconb"></i>填写预警调查结果</button>
        </div>
      </div>
  </div>
  </div>
</template>
<script>
export default {
  el: '#fromsData',
  data () {
    return {
      isShow: false,
      tbdata: [{
        cuozuo: '移动处置派遣',
        renyuan: '32844572',
        bumen: '崇川区城市管理局',
        yijian: '请及时处理',
        time: '2018-03-06 09:07'
      },
      {
        cuozuo: '催办',
        renyuan: '刘晓龙',
        bumen: '港闸区城市管理局',
        yijian: '已处理',
        time: '2018-03-06 09:07'
      },
      {
        cuozuo: '移动处置派遣',
        renyuan: '李漠',
        bumen: '道州区城市管理局',
        yijian: '请及时处理',
        time: '2018-03-06 09:07'
      },
      {
        cuozuo: '移动处置派遣',
        renyuan: '李漠',
        bumen: '道州区城市管理局',
        yijian: '请及时处理',
        time: '2018-03-06 09:07'
      }]
    }
  },
  components: {
  },
  mounted () {
  },
  methods: {
    fromData () {
      this.isShow = !this.isShow
    }
  }
}
</script>
<style>
  * {padding: 0;margin: 0;}
  html,body,#app{height: 100%;width:100%;background-color: #031931;}
  a {text-decoration: none;}
  ul li {list-style: none;}
  .fl {float: left;}
  .fr {float: right;}
  .clear {clear: both;}
  input:focus{ outline: none;}
  .icon{font-size: 22px; display: inline-block; margin-right: 10px;}
  .maindiv{width: 100%;height: 100%;/* background-image: url(); */z-index: 1;}
  .left-div{z-index: 1;position: absolute;top: 0;left: 0;width: 280px;height: 95.8%;padding: 20px 10px;background-color: #04101E;text-align: center;}
  .title{display:block;color: #F1FCFD;font-weight: bolder;font-size: 35px;margin-top: 30px;text-shadow:0px 0px 12px #7F7F7F;}
  .nav{margin-top: 40px;color: #B6C5D5;margin-left: 10px;margin-right: 10px;}
  .nav-item{padding: 20px 0;font-size: 20px;border: 2px solid transparent;}
  .nav-item:hover{color: #44DCF9;font-weight: bold;border: 2px solid #356387;background-color: #072535;border-radius: 6px;}
  .center{z-index: 1;position: absolute;left: 300px;width:1384px;height: 95.8%;text-align: center;}
  .big-title{display:block;color: #D4E8F8;font-weight: bolder;font-size: 30px;margin-top:10px;text-shadow:0px 0px 12px #7F7F7F;}
  .right-div{z-index: 1;position: absolute;top: 0;right: 0;width: 200px;height: 95.8%;padding: 20px 10px;background-color: #04101E;}
  .btns-top{position: relative;top: -6px;width: 100%;margin-bottom: 280px;}
  .yj-btn{ margin-left: 32px;position: relative;top:-6px;display: inline-block;color: #FFFFFF; background-color: #0C3854;border: 2px solid #356387;padding: 5px 20px;border-radius: 4px;}
  .iconj{color: #82A5CC;font-size: 35px; display: inline-block;margin-left: 20px;}
  .yj-nav{font-size: 22px;}
  .yj-nav-item{margin-bottom: 35px;border: 2px solid transparent;color: #7D8B98}
  .icons{font-size: 20px;margin-right: 10px;}
  .icon-pading{padding-left: 16px;}
  .yj-nav-item:hover{color: #44DCF9;font-weight: bold;}
  /* .fromsData{opacity:0.8;padding: 5px 10px;position: fixed;top: 80px;left: 255px;z-index: 999;width: 1400px;height: 800px;background-color: #041F3C;margin: 0 auto;border: 2px solid #3E5F78;border-radius: 8px;} */
  .fromsData{opacity:0.8;padding: 5px 10px;position: absolute;top: 80px;left: 255px;z-index: 999;width: 73%;height: 82%;background-color: #041F3C;margin: 0 auto;border: 2px solid #3E5F78;border-radius: 8px;}
  .fromsData-title{margin-left: 30px;display:block;color: #D4E8F8;font-weight: bolder;font-size: 30px;margin-top:10px;}
  .fromsData-title-cs{color: #DF7F5A;}
  .title-time{display: inline-block;border: 2px solid #375978;padding: 1px 8px;margin-right: 6px;background-color: #0F396B;}
  .time-magin{margin-left: 25px;}
  .forms-main{/* border: 1px solid #44DCF9; */width: 100%;margin-top: 30px;position: relative;}
  .main-left{position: relative;width: 55%;height: 100%;margin-left: 60px;display: inline-block;}
  .main-right{width: 35%;height: 100%;/* border: 1px solid #006600; */margin-left: 60px;display: inline-block;}
  .left-formdata{background-color: #031523;border: 2px solid #10283D;border-radius: 8px;padding: 15px 25px;}
  .left-formdata  span,input{display: inline-block;margin-bottom: 10px;}
  .input-text{color: #FFFFFF; font-weight: bold;}
  .form-input{background-color: transparent;border: none;color: #B6C5D5;font-size: 18px;width: 250px;}
  .input-b{color: #CCB081;font-weight: bolder;}
  .input-text1{color: #FFFFFF; font-weight: bold;font-size: 15px;}
  .axlb-input{width: 234px;}
  .dz-input{width: 575px;}
  .sl-input1{width: 220px;font-size: 15px;}
  .sl-input2{width: 155px;font-size: 15px;}
  .sl-input3{width: 70px;font-size: 15px;}
  .hr-text{display: block;margin-top: 15px;margin-bottom: 15px;background-color: #274557;height: 2px;border: 0;}
  .modetitle{display:block;color: #F1FCFD;font-weight: bolder;font-size: 25px;margin-top: 30px;text-shadow:0px 0px 12px #7F7F7F;margin-bottom: 10px;}
  table {border-spacing: 0px;}
  table tbody {display: block;height: 123px;overflow-y: scroll;}
  table thead,tbody tr {display: table;width: 100%;table-layout: fixed;}
  table thead {width: calc( 100% - 1em)}
  th{color: #21A5C5;text-align: left;width: 140px;line-height: 40px;border-bottom: 1px solid #B6C5D5;}
  td{color: #B6C5D5;height: 40px;line-height: 40px;border-bottom: 1px solid #B6C5D5;}
  .modetitle-right{display:block;color: #F1FCFD;font-weight: bolder;font-size: 25px;text-shadow:0px 0px 12px #7F7F7F;margin-bottom: 20px;}
  .jiean-input1{width: 18%;}
  .jiean-input2{width: 48%;}
  .modetitle-right-img{display:block;color: #F1FCFD;font-weight: bolder;font-size: 25px;text-shadow:0px 0px 12px #7F7F7F;margin-bottom: 12px;margin-top: 10px;}
  .img{width: 100px;height: 80px;background-color: #6E849C;border-radius: 3px;display: inline-block;margin-bottom: 2px;margin-right: 3px;}
  .form-btns{width: 100%;text-align: center;margin-top: 20px;height: 100%;}
  .jiechu-btn{color: #CDE9FF;background-color: #1376DA;display: inline-block;padding: 10px 20px;border: 2px solid #236CB7;border-radius: 5px;}
  .btn-magin{margin-right: 30px;}
  .iconb{display: inline-block;margin-right: 5px;}
</style>
